<template>
    <div>
        <TableSearch :rp="rp" :options="searchOpt" :search="handleSearch"  />
        <div class="container">
            <TableCustom  
                :columns="columns" 
                :tableData="tableData"
                :rp="rp"
                @update:rp="rp = $event"
                :query-data="queryDataApi"
                :del-data="deleteDataApi"
                :restore-data="restoreDataApi"
            >
                <!-- 顶部按钮 -->
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template>
                <!-- 操作 -->
                <template #operation="{ row, index }">
                    <el-button type="warning"  @click="handleView(row)">查看</el-button>
                    <el-button type="primary"  @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(row)">删除</el-button>
                </template>
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
        </el-dialog>
        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
            <TableDetail :data="viewData"></TableDetail>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import {ajax } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableEdit from '@/components/table-edit.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import {RQ, initRQ, toQParams} from '@/types/rq';
import {RP} from '@/types/rp';
/************************* 控制变量 *******************************/

/**
 * 表格设置
 */
const tableData = ref<any[]>([]);   // 表格数据
const rp = ref<RQ<any>>(initRQ());
rp.value.where = toQParams([
    { prop: 'status', type: 'eq', value: 0 },
]);
/**
 * 弹窗设置
 */
const visible = ref(false);      // 弹窗可见性控制变量
const isEdit = ref(false);      // 是否为编辑模式
const visible1 = ref(false);    // 查看详情弹窗可见性控制变量
const rowData = ref({});        // 当前行数据对象，用于编辑或查看详情
const viewData = ref({       // 查看详情时候的数据
    row: {}, // 当前行数据
    list: [] // 显示字段列表
});



/************************* 配置 *******************************/

// 导航搜索配置
const searchOpt = ref<FormOptionList[]>([
    { type: 'input', label: '用户名：', width: "150px", prop: 'name' }, 
    { 
        type: 'select', 
        label: '状态', 
        prop: 'status', 
        required: true, 
        width: "100px",
        opts: [ 
                { label: '正常', value: 0}, 
                { label: '删除', value: -1},
                { label: '禁用', value: 1},
                { label: '封号', value: 2},
        ]
    },
]);

// 表头配置
let columns = ref([
    { type: 'index', label: '序号', width: 55, align: 'center' }, // 序号列，固定宽度55px，居中对齐
    { prop: 'imgHead', label: '头像', type: "img",width: 70, imgWidth: "50px",imgHeight: "50px" }, //头像图片
    { prop: 'name', width: 100,label: '用户名' }, // 用户名列
    { prop: 'username',width: 250, label: '账号' }, // 手机号码列
    { prop: 'role', width: 100,label: '角色' }, // 角色列
    { prop: 'createAt', width: 250,label: '创建时间' },
    { prop: 'operation', width: 250,label: '操作'},
]);

//   新增/编辑弹窗配置
let options = ref<FormOption>({
    labelWidth: '100px', // 表单标签宽度
    span: 12, // 表单项布局跨度
    list: [ // 表单项列表
        { type: 'input', label: '用户名', prop: 'name', required: true }, // 用户名输入框，必填
        { type: 'input', label: '账户', prop: 'username', required: true }, // 用户名输入框，必填
        { type: 'input', label: '手机号', prop: 'phone', required: true }, // 手机号输入框，必填
        { type: 'input', label: '密码', prop: 'password', required: true }, // 密码输入框，必填
        { type: 'input', label: '邮箱', prop: 'email', required: true }, // 邮箱输入框，必填
        { 
            type: 'select', // 下拉选择框
            label: '角色', // 标签名称
            prop: 'role', // 数据字段名
            required: true, // 必填
            opts: [ // 下拉选项列表
                { label: '普通用户', value: 'user'}, 
                { label: '管理员', value: 'admin'},
            ]
        },
        { 
            type: 'select', // 下拉选择框
            label: '用户状态', // 标签名称
            prop: 'status', // 数据字段名
            required: true, // 必填
            opts: [ // 下拉选项列表
                { label: '正常', value: 0}, 
                { label: '删除', value: -1},
                { label: '禁用', value: 1},
                { label: '封号', value: 2},
            ]
        },
    ]
});


/************************* 点击触发 *******************************/

// 更新数据插入数据
const updateData = async (data: any) => {
    console.log("是否为编辑:"+isEdit);
    if( !isEdit.value ){
       addDataApi(data);// 初始化数据
    }
    else{
        updateDataApi(data);// 初始化数据
    }
};

// 关闭弹窗
const closeDialog = () => {
    visible.value = false; // 隐藏弹窗
    isEdit.value = false; // 重置为新增模式
};

// 查看详情按钮点击事件处理函数
const handleView = (row: any) => {
    viewData.value.row = { ...row }; // 将当前行数据赋值给viewData.row
    viewData.value.list = [ // 定义显示字段列表
        { prop: 'id', label: '用户ID' }, // 用户ID字段
        { prop: 'name', label: '用户名' }, // 用户名字段
        { prop: 'password', label: '密码' }, // 密码字段
        { prop: 'email', label: '邮箱' }, // 邮箱字段
        { prop: 'phone', label: '电话' }, // 电话字段
        { prop: 'role', label: '角色' }, // 角色字段
        { prop: 'date', label: '注册日期' }, // 注册日期字段
        { prop: 'status', label: '用户状态' }, // 用户状态字段
    ];
    visible1.value = true; // 显示查看详情弹窗
};

// 搜索函数：触发分页重置到第一页
const handleSearch = () => {
    changePage(1); // 调用分页函数，切换到第一页
};

// 编辑
const handleEdit = (row: any) => {
    rowData.value = { ...row }; // 将当前行数据赋值给rowData
    isEdit.value = true; // 设置为编辑模式
    visible.value = true; // 显示弹窗
};


/*************************  表格的封装方法 *******************************/

// 删除数据
const handleDelete = (data: any) => {
    let ids = [data.id];
   deleteDataApi(ids);// 初始化数据
};

/*************************  Api请求  *******************************/

// 从后端接口获取用户数据
const queryDataApi = async (queryRp?: RQ<any>) => {
    const currentRp = queryRp || rp.value;
    ajax({
        url: "user/list",
        method: 'POST', // 修正参数名称
        data: currentRp,
        success: (res:RP<any>) => {
            if( res.code == 0){
                tableData.value = res.dataList;
                // 更新 RP 中的总数
                rp.value.total = res.total;
            }else{
                ElMessage.error(res.msg);
            }
        }
    });

};

//添加数据
const addDataApi = async (data: any) => {
    ajax({
        url: "user/add",
        method: 'POST', // 修正参数名称
        data: data,
        success: (res:RP<any>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                closeDialog(); 
                queryDataApi(); 
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

//修改数据
const updateDataApi = async (data: any) => {
    ajax({
        url: "user/update",
        method: 'POST', // 修正参数名称
        data: data,
        success: (res:RP<any>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                closeDialog(); // 关闭弹窗
                queryDataApi(); // 重新获取数据
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

//删除数据
const deleteDataApi = async (ids?: number[]) => {
    if(ids){
        rp.value.ids = Array.isArray(ids) ? [...ids] : [ids];
    }
    ajax({
        url: "user/delete",
        method: 'POST', // 修正参数名称
        data: rp.value,
        success: (res:RP<any>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                closeDialog(); // 关闭弹窗
                queryDataApi(); // 重新获取数据
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};
// 恢复数据
const restoreDataApi = async (ids?: number[]) => {
    if(ids){
        rp.value.ids = Array.isArray(ids) ? [...ids] : [ids];
    }
    ajax({
        url: "user/restore",
        method: 'POST', // 修正参数名称
        data: rp.value,
        success: (res:RP<any>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                rp.value.ids = [];
                queryDataApi(); // 重新获取数据
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

queryDataApi();// 初始化数据
</script>

<style scoped></style>